<template>
	<view class="">
		<!-- <uni-nav-bar @clickLeft="back" fixed statusBar backgroundColor="#F5F7F8" left-icon="left" title="旅游景点" /> -->
		<view class="top-loc-search" >
			<image class="back" @click="back" src="https://qiniu-cdn.maeiyun.com/imgs/lvyou/right.png" mode=""></image>
			<view class="search-content" @click="handleToSearch">
				<view class="location" @click="tochooseCity">
					<image src="../../static/index/loc.png" mode=""></image>
					<view>{{userLocation.city}}</view>
				</view>
				<view class="lines"></view>
				<input type="text" v-model="keyname" placeholder="请输入关键词" confirm-type="search" placeholder-class="input-placeholder" />
				<view class="search-btn" @click="toSearch()">搜索</view>
			</view>
		</view>
		<mescroll-body height="500px" @init="mescrollInit" @down="downCallback" @up="upCallback" :down="downOption">
			<view class="hot-recommend-content">
				<!-- <view class="hot-title">
					<view class="hot-title-text">景点推荐</view> -->
					<!-- <view class="more-text" @click="linkPage('/otherpages/travelStrategy/strategyList')">更多</view> -->
				<!-- </view> -->
				<view class="recommend-list">
					<view @click="toTiketDetail(item)" class="each-recommend-list" :style="{'borderBottom':'1rpx solid #EFEFEF'}"  v-for="(item,index) in ticketList" :key="index">
						<image class="each-recommend-list-img" lazy-load :src="item.mainImage" mode=""></image>
						<view class="each-recommend-list-right">
							<view class="title">{{item.scenicName}}</view>
							<view class="lines-2">
								<uni-rate size="16" readonly active-color="#EF5233" :value="item.commentScore" />
								<view class="star-num">{{item.commentScore}}</view>
								<view class="pinglun-num">{{item.content_num}}条评论</view>
							</view>
							<view class="lines-3">
								<view class="address">{{item.cityName}}</view>
								<view class="juli">距您{{item.distance}}km</view>
								<view class="price">¥{{item.startPrice}}</view>
							</view>
							<view class="lines-4">
								<view class="tit" v-for="(items,indexs) in item.themeGroups" :key="indexs">{{items}}</view>
								<!-- <view class="tit">可定今日</view> -->
							</view>
						</view>
					</view>
				</view>
			</view>
		</mescroll-body>
	</view>
</template>

<script>
	import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
	import { mapState } from 'vuex'//引入mapState
	export default {
		mixins:[MescrollMixin],
		computed: {
			  ...mapState({'userLocation':'userLocation'}),
		},
		watch:{
			userLocation:function(newvalue,oldvalue){
				if(newvalue.city != oldvalue.city){
					this.downCallback()
				}
			}
		},
		data(){
			return{
				ticketList:[],
				keyname:"",
				locationData:{},
				themeGroup:"",
				city:"",
				downOption:{
				  auto:false
				}
			}
		},
		onLoad(option) {
			this.keyname = option.keyname?option.keyname:''
			this.themeGroup = option.themeGroup?option.themeGroup:''
			this.city = option.city?option.city:''
		},
		methods:{
			back(){
				uni.navigateBack()
			},
			toSearch(){
				this.downCallback()
			},
			handleToSearch(){},
			tochooseCity(){
				uni.navigateTo({
					url:'/otherpages/chooseAddress/loactionList'
				})
			},
			clickItem(){},
			downCallback(){
				this.ticketList= []
				this.mescroll.resetUpScroll();
			},
			/*上拉加载的回调*/
			upCallback(page) {
				let param = {
					keyWord: this.keyname,
					cityName: this.userLocation.cityname,
					provinceName: '',
					country: '',
					distanceRange:"50000",
					themeGroup: this.themeGroup,
					longitude: this.userLocation.longitude,
					latitude: this.userLocation.latitude,
					page: page.num
				};
				let opts = {
					url: "ticket/index",
					method: 'get'
				};
				this.request.httpTokenRequest(opts, param).then(res => {
					if(res.code == 0){
						this.ticketList = [...this.ticketList,...res.data.scenicList]
						this.mescroll.endSuccess(this.ticketList.length); 
					}else{
						
					}
					
				}, error => {
				
				})
			},
			toTiketDetail(item){
				uni.navigateTo({
					url: '/otherpages/travelStrategy/scenicSpotDetails?id=' + item.scenicId
				})
			},
		}
	}
</script>

<style lang="scss">
	.top-loc-search {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding-top: 0;
		position: sticky;
		top: 0;
		padding: var(--status-bar-height) 30rpx 0;
		height: calc(var(--status-bar-height) + 80rpx);
		z-index: 99;
		width: 100%;
		background-color: #F5F7F8;
		.back{
			width: 20rpx;
			height: 32rpx;
		}
		.search-content {
			width: 628rpx;
			height: 64rpx;
			display: flex;
			align-items: center;
			border-radius: 32rpx;
			// padding: 7rpx 10rpx 7rpx 23rpx;
			background-color: rgba(255, 255, 255, .9);
			padding-left: 31rpx;
			.location {
				width: 140rpx;
				height: 64rpx;
				background-color: rgba(255, 255, 255, .9);
				line-height: 64rpx;
				display: flex;
				align-items: center;
				box-sizing: border-box;
				image {
					width: 22rpx;
					height: 30rpx;
					margin-right: 13rpx;
					flex: 0 0 auto;
				}
				view{
					font-size: 28rpx;
					font-weight: 400;
					color: #000000;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
				}
			}
			.lines{
				width: 1rpx;
				height: 30rpx;
				border: 1rpx solid #C4C3C3;
				margin-right: 10rpx;
			}
			image {
				width: 30rpx;
				height: 30rpx;
				flex: 0 0 auto;
				margin-right: 20rpx;
			}
			.input-placeholder {
				font-size: 28rpx;
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				color: #AEAEB0;
			}
			.search-btn {
				width: 103rpx !important;
				height: 50rpx;
				background: #EF5233;
				border-radius: 32rpx;
				backdrop-filter: blur(10px);
				font-size: 26rpx;
				line-height: 50rpx;
				text-align: center;
				color: #fff;
				font-family: PingFangSC, PingFang SC;
				margin-right: 7rpx;
			}
		}
	}
	//推荐
	.hot-recommend-content {
		background: #FFFFFF;
		box-shadow: 0rpx 0rpx 4rpx 4rpx rgba(211, 211, 211, 0.12);
		border-radius: 28rpx;
		border: 1rpx solid #FFFFFF;
		padding: 0 30rpx;
		margin-bottom: 30rpx;
	
		.hot-title {
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding-top: 20rpx;
	
			.hot-title-text {
				font-size: 34rpx;
				font-family: PingFangSC, PingFang SC;
				font-weight: 600;
				color: #357650;
				line-height: 48rpx;
			}
	
			.more-text {
				font-size: $uni-font-size-base;
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				color: #949393;
				line-height: 33rpx;
			}
		}
	}
	
	//景区
	.recommend-list {
		.each-recommend-list {
			display: flex;
			padding: 30rpx 0;
	
			// border-bottom: 1rpx solid #EFEFEF;
			.each-recommend-list-img {
				width: 270rpx;
				height: 180rpx;
				flex: 0 0 auto;
			}
	
			.each-recommend-list-right {
				flex-grow: 1;
				padding-left: 20rpx;
	
				.title {
					font-size: 30rpx;
					font-family: PingFangSC, PingFang SC;
					font-weight: 500;
					color: #0F0807;
					line-height: 42rpx;
					margin-bottom: 16rpx;
				}
	
				.lines-2 {
					display: flex;
					align-items: center;
					margin-bottom: 7rpx;
	
					.star-num {
						font-size: $uni-font-size-base;
						font-family: PingFangSC, PingFang SC;
						font-weight: 600;
						color: #EF5233;
						line-height: 28rpx;
						margin: 0 10rpx;
					}
	
					.pinglun-num {
						font-size: $uni-font-size-base;
						font-family: PingFangSC, PingFang SC;
						font-weight: 400;
						color: #888889;
						line-height: 28rpx;
					}
				}
	
				.lines-3 {
					display: flex;
					align-items: center;
	
					.address {
						font-size: $uni-font-size-base;
						font-family: PingFangSC, PingFang SC;
						font-weight: 400;
						color: #888889;
						line-height: 30rpx;
					}
	
					.juli {
						font-size: $uni-font-size-base;
						font-family: PingFangSC, PingFang SC;
						font-weight: 400;
						color: #888889;
						line-height: 30rpx;
						margin-left: 21rpx;
					}
					.price {
						font-size: $uni-font-size-base;
						font-family: PingFangSC, PingFang SC;
						font-weight: 600;
						color: #EF5233;
						line-height: 28rpx;
						margin-left: auto;
					}
				}
	
				.lines-4 {
					display: flex;
					align-items: center;
					margin-top: 13rpx;
					flex-wrap: wrap;
	
					.tit {
						padding: 0 13rpx;
						height: 26rpx;
						border-radius: 6rpx;
						border: 1rpx solid #ECECEC;
						font-size: 18rpx;
						font-family: PingFangSC, PingFang SC;
						font-weight: 400;
						color: #6985C2;
						line-height: 25rpx;
						margin-right: 11rpx;
					}
				}
			}
		}
	}
</style>